<template>
  <div>
    <my-header class="header">
      <span class="left iconfont iconback-arrow" @click="$router.back()"></span>
      <span class="title">图书商城</span>
      <span class="right"></span>
    </my-header>
    <div>
        <div class="state-box">
            <div class="title" v-main-color="$store.state.mainColor"><h3>正在看</h3><span @click="menuDown(0)" class="iconfont iconright" :class="showIsRead ? 'active' : ''"></span></div>
            <transition name="fade">
                <ul class="list" v-show="showIsRead">
                    <li v-for="(item, i) in books" v-show="item.state === 0" :key="item.id">
                        <div class="book-name">{{item.name}}</div>
                        <div class="exit">
                            <span :style="{color: $store.state.mainColor}" @click="changeState(1, item)">标记为已看完</span>
                            |
                            <span @click="del(i)">删除图书</span>
                        </div>
                    </li>
                </ul>
            </transition>
        </div>
        <div class="state-box">
            <div class="title" v-main-color="$store.state.mainColor"><h3>已看完</h3><span @click="menuDown(1)" class="iconfont iconright" :class="shouFinish ? 'active' : ''"></span></div>
            <transition name="fade">
                <ul class="list" v-show="shouFinish">
                    <li v-for="(item, i) in books" v-show="item.state === 1" :key="item.id">
                        <div class="book-name">{{item.name}}</div>
                        <div class="exit">
                            <span :style="{color: $store.state.mainColor}" @click="changeState(0, item)">再看一遍</span>
                            |
                            <span @click="del(i)">删除图书</span>
                        </div>
                    </li>
                </ul>
             </transition>
        </div>
    </div>

 </div>
</template>

<script>
import myHeader from '@/components/myHeader/myHeader'
import { useStore } from 'vuex'
import { computed, ref } from 'vue'
export default {
    components: {
        myHeader
    },

    setup() {
        const store = useStore()
        const books = store.state.books
        const showIsRead = ref(false) // 控制正在看的内容下拉展开的变量
        const shouFinish = ref(false) // 控制已经读完的列表展示的变量
        // 控制展开和收缩列表内容的时间
        function menuDown(num) {
            if(num === 0) {
                showIsRead.value = !showIsRead.value
            } else {
                shouFinish.value = !shouFinish.value
            }
        }

        // 删除时间
        function del(i) {
            books.splice(i, 1)
            store.commit('changeBooks', books)
        }

        // 切换是否看完的时间
        function changeState(num, item) {
            item.state = num
            store.commit('changeBooks', books)
        }
        
        return {
            books,
            menuDown,
            showIsRead,
            shouFinish,
            del,
            changeState
        }
    }
 }
</script>

<style scoped lang="scss">
.header {
    margin-bottom: 20px;
}
.left {
    color: skyblue;
}
.title {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    align-items: center;
    color: #fff;
    h3 {
        margin: 0;
    }
    span {
        transition: all 0.5s;
    }
    .active {
        transform: rotate(90deg);
    }
    
}
.list {
    width: 100%;
    li {
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        padding: 0 15px;
        font-size: 14px;
    }
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}
.fade-enter-active, .fade-leave-active {
    transition: all 0.5s;
}
</style>